/*
*@module: btns
*@Author: guoleiting 2016-08-10
*@Update: 
*/


@charset "utf-8";
/* -------------------------------------------------
 * btn scss
 * -------------------------------------------------
*/


// 变量
//----------------------------------
$btnNormalSize:          10px 24px 24px 12px !default; //默认按钮的左右padding，高度 line-heigh，字体大小
$btnSizeClass:           (sm 5px 21px 12px) (lg 15px 30px 14px) (xl 20px 40px 14px)!default; //(small 5px 21px 12px) 每个括号为一组，里面四个参数分别为：class 左右padding，高度，字体大小
$btnColorClass:          (primary $primary #fff) (orange $orange #fff) (green $green #fff) (blue $blue #fff) (danger $red #fff) !default; //(primary $primary #fff) 每个括号为一组，里面三个参数分别为：class 背景色 文本色
$btnBorderClass:         (primary $primary) (orange $orange) (green $green) (blue $blue) (danger $red);


// 按钮基本样式，联合申明
%btn-basic{
	@include ib;
	cursor: pointer;
	text-align:center;
	border:0 none;
	box-sizing: border-box;
	border-radius: 3px;
}



// btn-size
@mixin btn-size($padding:nth($btnNormalSize,1), $height:nth($btnNormalSize,2), $fontLineHeight:nth($btnNormalSize,3), $fontSize:nth($btnNormalSize,4)){
  	padding:0 $padding;
  	font-size:$fontSize;
    height: $height;
    line-height: $fontLineHeight;
}


// btn-color
// 包括按钮背景，文本色，是否有边框
@mixin btn-color($bgColor:#e6e6e6, $textColor:#333){
  	color:$textColor;
  	background-color: $bgColor;
  	&:hover{
    	background-color: darken($bgColor,5%);
    	color:$textColor;
  	}
}



@mixin btn-border($borderC:$primary){
	color: $borderC;
	background: #fff;
	border: 1px solid $borderC;
	border-radius: 3px;
	&:hover{
		color: #fff;
		background: $borderC;
	}
}


// 不同大小的btn class
//----------------------------------

// 如果输出单个大小按钮，直接调用btn-size
// @include btn-size($padding, $height, $fontSize, $formbtn)
// 最后一个$formbtn参数，如果是普通按钮可以忽略（默认为false），如果是form表单元素按钮则传入true

// 如果输出多个大小按钮，则直接调用下面的mixin
// @include btn-size-multi();
@mixin btn-size-multi($sizeLists: $btnSizeClass){
	 @each $size in $sizeLists{
	    $class:     nth($size, 1);
	    $padding:   nth($size, 2);
	    $height:    nth($size, 3);
	    $fontSize:  nth($size, 4);

	    .#{$baseClass}btn-#{$class}{
	      	@include btn-size($padding, $height, $height, $fontSize);
	    }
	}
}


// 不同颜色带边框的btn class
//----------------------------------

// 如果输出单个颜色按钮，直接调用btn-border
// @mixin btn-border($borderC);

@mixin btn-border-multi($borderLists: $btnBorderClass){
	 @each $border in $borderLists{
	    $class:     nth($border, 1);
	    $borderC:   nth($border, 2);

	    .#{$baseClass}btn-border-#{$class}{
	      	@include btn-border($borderC);
	    }
	}
}


// 不同颜色的btn class
//----------------------------------

// 如果输出单个颜色按钮，直接调用btn-color
// @include btn-color($bgColor,$textColor);
.#{$baseClass}btn-primary {
  @include btn-color($primary, #fff);
}

//如果输出至少两个不同颜色按钮，则调用下面的mixin
// @include btn-color-multi();
@mixin btn-color-multi($colorLists: $btnColorClass){
  @each $color in $colorLists{
    $class:      nth($color,1);
    $bgColor:    nth($color,2);
    $textColor:  nth($color,3);

    .#{$baseClass}btn-#{$class}{
      @include btn-color($bgColor,$textColor);
    }
  }
}


.#{$baseClass}btn{
	@extend %btn-basic;
	@include btn-size;
	@include btn-color;
	// @include btn-border;
}


.#{$baseClass}btn-link{
	
}

.#{$baseClass}btn-block{
	display: block;
}



@include btn-size-multi;

@include btn-border-multi;

@include btn-color-multi;


